今天用一個算是較多人會使用的套件 axios 抓取 API 資料，今天來聊一下，axios 套件，axios 是一個基於promise的HTTP庫，可以用在瀏覽器和 node.js 中。它本質也是對原生 XMLHttpRequest 的封裝，只不過它是Promise 的實現版本，符合最新的ES規範。

axios 怎麼用？
前面分別使用 request 跟 fetch 方法，今天再一次用套用看看效果如何囉！
首先
我們在昨天 api 這個資料夾裡面新增一個先在生成一個 useaxios.js 檔並且用 vscode 開啟，這就是我們今天要來實作的檔案。
同樣引入 API 的網站 reqres 裡測試用的 API 網址，以下微人先宣告了引入 axios 做使用。

axios 方法使用

const fetch = require("node-axios");

fetch("https://reqres.in/api/users/2")
.then(function(response) { return response.json(); })
.then(function(data) {
  console.log(data);
})

沒錯，這寫法其實跟昨天的 fetch 一樣，所以我們來看看結果：

 ~/Desktop/projects/api  node useaxios.js              
{
  data: {
    id: 2,
    email: 'janet.weaver@reqres.in',
    first_name: 'Janet',
    last_name: 'Weaver',
    avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg'
  },
  ad: {
    company: 'StatusCode Weekly',
    url: 'http://statuscode.org/',
    text: 'A weekly newsletter focusing on software development, infrastructure, the server, performance, and the stack end of things.'
  }
}

是不是不意外，完全一模模一樣樣啊！但為什麼 axios 套件會是大家所偏好使用的呢？
微人今天來解答解答，以我們所使用本地的環境中其實是沒有差異的，而差異主要還是在瀏覽器端的處理程序上，底下來說明說明：
axios 優點：

• 從瀏覽器中建立XMLHttpRequests
• 從 node.js 建立 http 請求
• 支援 Promise API
• 攔截請求和響應
• 轉換請求資料和響應資料
• 取消請求
• 自動轉換 JSON 資料
• 客戶端支援防禦 XSRF
  問題：
  只持現代代瀏覽器.

Fetch 優點：

• Fetch API提供了一個 JavaScript 介面，用於訪問和操作HTTP管道的部分，例如請求和響應。
• 提供了一個全域性fetch()方法，該方法提供了一種簡單，合理的方式來跨網路非同步獲取資源。
• fetch是低層次的API，代替XHR，可以輕鬆處理各種格式，非文字化格式。可以很容易的被其他技術使用，例如Service Workers。但是想要很好的使用fetch，需要做一些封裝處理。

問題：

• fetch只對網路請求報錯，對400，500都當做成功的請求，需要封裝去處理
• fetch預設不會帶cookie，需要新增配置項。
• fetch不支援abort，不支援超時控制，使用setTimeout及Promise.reject的實現超時控制並不能阻止請求過程繼續在後臺執行，造成了流量的浪費。
• fetch沒有辦法原生監測請求的進度，而XHR可以。

今天就先了到這囉，明天見，掰餔。